<template>
    <div class="detailDialog" v-if="showDialog">
        <div class="detailContent">
            <div class="detailTitle">Chi tiết thanh toán</div>
            <div class="detailDialogData">
                <!-- <div class="dialogDataItem">
                    <p class="dialogdataName">Số tiền giải ngân</p>
                    <p class="dialogdataValue">{{ orderDetailInfo.repayRecordSet.repayAmt }}₫</p>
                </div> -->
                <div class="dialogDataItem">
                    <p class="dialogdataName">Lãi xuất</p>
                    <p class="dialogdataValue">{{ orderDetailInfo.computedSet.financeCharge }}₫</p>
                </div>
                <div class="dialogDataItem">
                    <p class="dialogdataName">Phí báo cáo tín dụng</p>
                    <p class="dialogdataValue">{{ orderDetailInfo.computedSet.salesTax }}₫</p>
                </div>
                <div class="dialogDataItem">
                    <p class="dialogdataName">Phí thanh toán</p>
                    <p class="dialogdataValue">{{ orderDetailInfo.computedSet.rolloverCharge }}₫</p>
                </div>
                <div class="dialogDataItem">
                    <p class="dialogdataName">Phí phục vụ</p>
                    <p class="dialogdataValue">{{ orderDetailInfo.computedSet.handlingFee }}₫</p>
                </div>
                <div class="dialogDataItem">
                    <p class="dialogdataName">Phí quá hạn</p>
                    <p class="dialogdataValue">{{ orderDetailInfo.computedSet.delayedFee }}₫</p>
                </div>

            </div>
            <div class="dialogConfirmBtn" @click="closeDialog">
                Đã hiểu
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { emit } from 'process';
import { ref, defineProps, watch } from 'vue';

let props = defineProps(['showDialog', 'deferInfo'])
let emits = defineEmits(['changeDialogHandler'])


let orderDetailInfo = ref()


let showDialog = ref(false)

const closeDialog = () => {
    showDialog.value = !showDialog.value
    emits('changeDialogHandler', false)
}

watch(() => props.showDialog, (newVal) => {
    showDialog.value = newVal
})
watch(() => props.deferInfo, (newVal) => {
    orderDetailInfo.value = newVal
})
</script>

<style lang="less" scoped>
.detailDialog {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;

    .detailContent {
        width: 85%;
        background-color: white;
        border-radius: .6rem;
        padding: 1rem;

        .detailTitle {
            font-family: SF Pro, SF Pro;
            font-weight: 600;
            font-size: 18px;
            color: #292B33;
            line-height: 26px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-bottom: .8rem;
        }

        .dialogDataItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .6rem;

            font-family: SF Pro, SF Pro;
            font-weight: 400;
            font-size: .7rem;
            color: #9599A6;
            line-height: 1.1rem;
            text-align: left;
            font-style: normal;
            text-transform: none;

            .dialogdataValue {
                color: #292B33;
            }
        }

        .dialogConfirmBtn {

            height: 2.2rem;
            background-color: #009959;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: .2rem;

            /* font-family: SF Pro, SF Pro; */
            font-weight: 600;
            font-size: .8rem;
            color: #FFFFFF;
            line-height: 1.2rem;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }



}
</style>